import { Dropdown } from "antd"
import type { MenuProps } from 'antd';
import { useDispatch, useSelector } from "react-redux";
import { setAssemblySize } from "@/redux/modules/global";
import { State } from "@/redux/interface";

const AssemblySize = () => {
    const dispatch = useDispatch()
    const {assemblySize} = useSelector((state:State) => state.global)

    const onClick: MenuProps['onClick'] = ({ key }) => {
        dispatch(setAssemblySize(key))
    };

    const items: MenuProps['items'] = [
        {
          key: 'middle',
          label: <span>默认</span>,
          disabled: assemblySize === "middle"
        },
        {
            key: 'large',
            label: <span>大型</span>,
            disabled: assemblySize === "large"
        },
        {
            key: 'small',
            label: <span>小型</span>,
            disabled: assemblySize === "small"
        }
      ];

    return (
        <Dropdown menu={{items, onClick }} placement="bottom" arrow={{ pointAtCenter: true }} trigger={['click']}>
            <i className="icon-style iconfont icon-contentright"></i>
        </Dropdown>
    )
}

export default AssemblySize